<template>
  <div class="com-container">
      <div class="com-chart" ref="trend_ref" style="height:550px" >
        
      </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            chartInstance:null,
            allData:null
        }
    },
    mounted(){
        this.initChart();
        this.getData();
        this.screenAdapter();
        window.addEventListener('resize',this.screenAdapter);
    },
    destroyed(){
        window.removeEventListener('resize',this.screenAdapter);
    },
    methods:{
        initChart(){
            const initOption ={
                 title:{
                    text:'▎销售趋势',
                    textStyle:{
                        fontSize:66
                    },
                    left:20,
                    top:20
                },
                grid:{
                    left:'3%',
                    top:'35%',
                    right:'4%',
                    bottom:'1%',
                    containLabel:true
                },
                tooltip:{
                    trigger:'axis'
                },
                legend:{
                    left:20,
                    top:"15%",
                    icon:'circle'
                },
                xAxis:{
                    type:"category",
                    boundaryGap:false
                },
                yAxis:{
                    type:"value"
                }
            };
            this.chartInstance = window.echarts.init(this.$refs.trend_ref,'chalk');
            this.chartInstance.setOption(initOption);
        },
        async getData(){
            //得到数据
            this.allData =await axios.get('http://127.0.0.1:8888/trend');
            console.log(this.allData);
            
            this.updateChart();
        },
        updateChart(){
             const colorArr1 = [
                    'rgba(11, 168, 44, 0.5)',
                    'rgba(44, 110, 255, 0.5)',
                    'rgba(22, 242, 217, 0.5)',
                    'rgba(254, 33, 30, 0.5)',
                    'rgba(250, 105, 0, 0.5)'
                ]
                // 全透明的颜色值
                const colorArr2 = [
                    'rgba(11, 168, 44, 0)',
                    'rgba(44, 110, 255, 0)',
                    'rgba(22, 242, 217, 0)',
                    'rgba(254, 33, 30, 0)',
                    'rgba(250, 105, 0, 0)'
                ]
            const timeArray =this.allData.data.common.month;
            const valueArray =this.allData.data.map.data;
            const legendArray =valueArray.map((item)=>{
                return item.name;
            })
            const seriesArray =valueArray.map((item,index)=>{
                return {
                    type:'line',
                    name:item.name,
                    data:item.data,
                    stack:'map',
                    areaStyle:{
                        color:new window.echarts.graphic.LinearGradient(0,0,0,1,[
                            {
                                offset:0,
                                color:colorArr1[index],
                            },
                            {
                                offset:1,
                                color:colorArr2[index]
                            }
                        ])
                    }
                }
            })
            const dataOption ={
                xAxis:{
                    data:timeArray
                },
                series:seriesArray,
                legend:{
                    data:legendArray
                }

            };
            this.chartInstance.setOption(dataOption);

        },
        screenAdapter(){
            const adapterOption ={};
            this.chartInstance.setOption(adapterOption);
            this.chartInstance.resize();
        }

    }

}
</script>

<style>

</style>